<template>
    <div class="finance_box" ref="myElementRef">
        <div class="btn_box">
            <el-button type="primary" style="background-color: #1e6aed" @click="getadd()">+
                新增</el-button>
        </div>

        <!-- 表格 -->
        <div class="table_box">
            <el-table :data="tableData" style="width: 100%" row-key="permissionId" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="permissionName" label="菜单名称" />
                <el-table-column prop="permissionCode" label="权限编码" />
                <el-table-column prop="icon" label="图标" width="120">
                    <template #default="{ row }">
                        <el-icon>
                            <component :is="row.icon" />
                        </el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="permissionType" label="权限类型" width="120">
                    <template #default="{ row }">
                        {{ row.permissionType == 1 ? '按钮' : '菜单' }}
                    </template>
                </el-table-column>
                <el-table-column prop="resourcePath" label="资源路径" />
                <el-table-column prop="sortOrder" label="排序顺序" width="120" />
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.status == 1 ? 'success' : 'info'">
                            {{ row.status == 1 ? '启用' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" />
                <el-table-column prop="" label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="primary" @click="edit(row)" link>编辑</el-button>
                        <el-button type="danger" link @click="del(row)">删除</el-button>
                        <el-button type="warning" link @click="openForm(row)"
                            v-if="row.permissionType == 0">新增子菜单</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog align-center v-model="dialogVisible" title="信息编辑" width="30%" draggable>
            <div class="from_add">
                <el-form style="width: 90%" label-width="100px" :model="formLabelAlign" ref="formRef" :rules="rules">
                    <el-form-item label="菜单名称" prop="permissionName">
                        <el-input v-model="formLabelAlign.permissionName" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="权限编码" prop="permissionCode">
                        <el-input v-model="formLabelAlign.permissionCode" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="图标" prop="icon">
                        <el-input v-model="formLabelAlign.icon" placeholder="请输入" />
                    </el-form-item>
                    <!-- <el-form-item label="权限类型" prop="permissionType">
            <el-input v-model="formLabelAlign.permissionType" placeholder="请输入" />
          </el-form-item> -->
                    <el-form-item label="权限类型">
                        <el-select v-model="formLabelAlign.permissionType" class="m-2" placeholder="请选择">
                            <el-option v-for="item in optionsliet" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="资源路径" prop="resourcePath">
                        <el-input v-model="formLabelAlign.resourcePath" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="排序顺序" prop="sortOrder">
                        <el-input v-model="formLabelAlign.sortOrder" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="formLabelAlign.status" class="m-2" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>


            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="subimt($refs.formRef)"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick, onUnmounted, onActivated } from "vue";
import { PermissionsAdd, PermissionsUpdate, PermissionsDel, PermissionsList } from '@/api/menu.js';
import { ElMessage, ElMessageBox } from "element-plus";
const myElementRef = ref();
const dialogVisible = ref(false);
const options = reactive([
    { label: "不启用", value: 0 },
    { label: "启用", value: 1 },
])
const optionsliet = reactive([
    { label: "菜单", value: 0 },
    { label: "按钮", value: 1 },
])

const rules = reactive({
    permissionName: [
        {
            required: true,
            message: "菜单名称不能为空",
            trigger: "blur",
        },
    ],
    permissionCode: [
        {
            required: true,
            message: "权限编码不能为空",
            trigger: "blur",
        },
    ],

});
const formLabelAlign = reactive({
    permissionName: "",
    permissionCode: "",
    permissionType: 0,
    parentId: 0,
    resourcePath: "",
    icon: "",
    sortOrder: 0,
    status: 1
});
const tableData = ref([]);

onMounted(() => {
    getList();
});
onUnmounted(() => {
    window.onresize = null;
});
const getList = async () => {
    const res = await PermissionsList({});
    tableData.value = res.data || [];
};

const getadd = () => {
    // console.log("新增");
    
    Object.assign(formLabelAlign, {
        permissionName: "",
        permissionCode: "",
        permissionType: 0,
        parentId: 0,
        resourcePath: "",
        icon: "",
        sortOrder: 0,
        status: 1,
        permissionId:null
    })
    dialogVisible.value = true
}; 
const edit = (row) => {
  // console.log(row)
  Object.assign(formLabelAlign, {
    permissionName: row.permissionName,
    permissionCode: row.permissionCode,
    permissionType: row.permissionType,
    parentId: row.parentId,
    resourcePath: row.resourcePath,
    icon: row.icon,
    sortOrder: row.sortOrder,
    status: row.status,
    permissionId:row.permissionId
  })
  dialogVisible.value = true;
};

const openForm = (row) => {
  // console.log(row)
  Object.assign(formLabelAlign, {
    permissionName: "",
    permissionCode: "",
    permissionType: 0,
    parentId: row.permissionId,
    resourcePath: "",
    icon: "",
    sortOrder: 0,
    status: 1,
    permissionId:null
  })
  dialogVisible.value = true;
};
const subimt = async (formEl) => {
  if (!formEl) return;

  await formEl.validate(async (valid) => {
    if (valid) {
      try {
        const data = { ...formLabelAlign };
        // console.log(data)
        if (data.permissionId > 0) {
          const res = await PermissionsUpdate(data);
          if (res.code === 200) {
            dialogVisible.value = false;
            ElMessage.success('修改成功');
          } else {
            ElMessage.error(res.msg || '修改失败');
          }
        } else {
          const res = await PermissionsAdd(data);
          if (res.code === 200) {
            dialogVisible.value = false;
            ElMessage.success('保存成功');
          } else {
            ElMessage.error(res.msg || '保存失败');
          }
        }
        getList()

      } catch (error) {
        ElMessage.error('保存失败，请重试');
      } finally {

      }
    } else {
      ElMessage.warning('请填写完整的信息');
    }
  });
};
// 删除
const del = (row) => {
  ElMessageBox.alert('确认要删除信息吗', '删除提醒', {
    confirmButtonText: '确认',
    callback: (action) => {
      if (action == "confirm") {
        // console.log(111)
        getDel(row)
      }
      
    },
  })
};

const getDel = async (row) => {
  // console.log(serchData[0].value)
  const res = await PermissionsDel({
    permissionId: row.permissionId
  });
  if (res.code === 200) {
    // dialogVisible.value = false;
    ElMessage.success('删除成功');
  } else {
    ElMessage.error(res.msg || '删除失败');
  }
  getList()
};

</script>

<style lang="less" scoped>
.finance_box {
    flex: 1;
    overflow: auto;
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
    margin-right: 10px;
}

.btn_box {
    height: 40px;
    display: flex;
}

.table_box {
    width: 100%;
}

/deep/.el-button-group .el-button--primary:first-child {
    background-color: #1e6aed;
    border: none;
}

.serBtn {
    margin-left: 10px;
    background-color: #f0f0f0;
    color: #000;
    border: none;
}

.serBtn:hover {
    background-color: #f0f0f0;
    color: #000;
}

.opBtn {
    margin: 0 !important;
}

.opBtn:hover {
    color: #e6a755;
}
</style>